<template>
  <div class="constCommittee">
    <div class="nav">
      <span class="title">施工单位类公司业务控制台</span>
      <span class="back">返回</span>
      <span class="fullScreen" v-if="isFullScreen" @click="fullScreen">全屏</span>
      <span class="exitScreen" v-else>退出</span>
    </div>
    <el-row :gutter="40">
      <el-col :span="6" class="wrap">
        <Information class="component-contents"></Information>
        <MemberScale class="component-contents"></MemberScale>
        <MemberNum class="component-contents"></MemberNum>
      </el-col>
      <el-col :span="12">
        <BuildMap class="component-map"></BuildMap>
      </el-col>
      <el-col :span="6" class="wrap">
        <UnitStatistics class="component-contents"></UnitStatistics>
        <BuildType class="component-contents"></BuildType>
        <ProProgress class="component-contents"></ProProgress>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Information from "./information";
import BuildType from "./buildType";
import MemberNum from "./memberNum";
import MemberScale from "./memberScale";
import ProProgress from "./proProgress";
import UnitStatistics from "./unitStatistics";
import BuildMap from "./buildMap";
export default {
  components: {
    Information,
    BuildType,
    MemberNum,
    MemberScale,
    ProProgress,
    UnitStatistics,
    BuildMap
  },
  data() {
    return {
      isFullScreen: true
    };
  },
  methods: {
    fullScreen() {
      var el = document.documentElement;

      var rfs = el.requestFullScreen || el.webkitRequestFullScreen;

      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");

        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      } else if (el.oRequestFullscreen) {
        el.oRequestFullscreen();
      } else {
        swal({
          title: "浏览器不支持全屏调用！",
          text: "请更换浏览器或按F11键切换全屏！(3秒后自动关闭)",
          type: "error",
          timer: 3000
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.constCommittee {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: url("/static/img/constUnitBg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0 40px;
  .nav {
    height: 65px;
    width: 100%;
    color: #0ff;
    font-size: 16px;
    position: relative;
    text-align: center;
    background: url("/static/img/constUnitTop.png") no-repeat center center;
    background-size: 100% 100%;
    .title {
      font-size: 30px;
      color: #e6e6e6;
      width: 60%;
    }
    .back {
      position: absolute;
      right: 60px;
      top: 40px;
    }
    .fullScreen {
      position: absolute;
      right: 140px;
      top: 40px;
    }
  }
  .wrap {
    background: url("/static/img/screen_leftTop.png") left top no-repeat,
      url("/static/img/scree_rightTop.png") right top no-repeat,
      url("/static/img/screen_leftBottom.png") left bottom no-repeat,
      url("/static/img/screen_rightBottom.png") right bottom no-repeat;
  }
  .component-contents {
    width: 100%;
    height: 28vh;
    overflow: hidden;
    // background: url("/static/img/constCommitteeBg1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
  }
  .component-map {
    width: 100%;
    height: 89vh;
    padding: 2vh;
    margin-top: 10px;
    // background: url("/static/img/constCommitteeBg2.png") no-repeat;
    border: 2px solid #02aeff;
    background-size: 100% 100%;
  }
}
</style>